<template>
	<view style="height: 100%">
		<!-- <top title="工厂地图" :show="2"></top> -->

		<view :style="'padding-top:' + (navTop * 2 - 6) + 'rpx;'" class="pots">
			<!-- <view class="back-img" @tap="showPopups">
				<view class="df ac">
					<image class="img16" src="https://wx.xtwaixie.com/img/add1.png" />
					<p class="f14 c28 f600 ml8">{{ top_area[1] }}</p>
				</view>
			</view> -->
			<view class="top-title">工厂地图</view>
		</view>

		<view class="df ac sb" :style="'padding-top:' + (navTop * 2 - 6 + 90) + 'rpx;'">
			<view class="" style="width: 82%;">
				<van-search disabled :field-class="'height:80rpx'" :value="value" placeholder="请输入商品关键词搜索" shape="round"
					@tap.native="goSearch" />
			</view>
			<view class="mr10">
				<view class="f14">
					工厂地图
				</view>
			</view>
		</view>
		<view class="" v-if="tab_list">
			<view class="post" :style="'top:' + (navTop * 2 + 84 + 90) + 'rpx;'" style="z-index: 100;">
				<ul class="df ac bgcf bbf1">
					<block v-for="(item, index) in tab_list" :key="index">
						<li class="df ac jc h44 w50" @tap.native="ontabShow(index)" :data-i="index" style="width: 250rpx;">
							<P :class="'f14 ' + (item.show ? 'c10' : 'c6b')" class="tabListName">{{ item.name }}</P>
							<image class="down ml8" referrerPolicy='no-referrer'
								:src="item.show ? 'https://wx.xtwaixie.com/img/down1.png' : 'https://wx.xtwaixie.com/img/down.png'" />
						</li>
					</block>
				</ul>
			</view>
			<!-- <van-dropdown-menu active-color="#3D6ECF">
				<van-dropdown-item id="item" :title="tab_list[0].name">
					<view class="position_screen">
						<view class="">
							当前位置
						</view>
						<view class="position_list df mt10">
							<view :class="screen_index[0] == index ? 'position_item_active position_item' : 'position_item'"
								:style="index == 0 ? '' : 'line-height:65rpx'"
								@click="changeScreen(0,index)" v-for="(item,index) in position_screen" :key="index">
								<view class="">
									{{ item == 0 ? '附近' : item + '公里' }}
								</view>
								<view class="f12" v-if="item == 0" :style=" screen_index[0] == index ? 'color:#4874CB;' : 'color:gray'">
									智能范围
								</view>
							</view>
						</view>
					</view>
				</van-dropdown-item>
				<van-dropdown-item id="item" :title="tab_list[1].name">

				</van-dropdown-item>
				<van-dropdown-item id="item" :title="tab_list[2].name">

				</van-dropdown-item>
			</van-dropdown-menu> -->
		</view>
		<view style="padding:0rpx 0rpx">
			<view class="unAuth_box mt10" v-if="!isAuth_location">
				<image src="https://cdn.xtwaixie.com/uploads/20240923/172705609866f0c8e2566ce.png" mode="widthFix"></image>
				<view class="unAuth_info">
					<view class="">
						为保证功能正常使用，请先打开位置服务
					</view>
					<view class="openSet" @click="openSet">
						打开
					</view>
					<view class="f14" style="width: 240rpx;margin: 0rpx auto;text-align: left;">
						1.点击【位置信息】
					</view>
					<view class="f14" style="width: 240rpx;margin: 5rpx auto;text-align: left;">
						2.选择“允许”
					</view>
				</view>
			</view>
			<view class="" v-else style="position: relative;">
				<map id="map" style="width:100%;height:400rpx" :longitude="longitude" :latitude="latitude" scale="17"
					:controls="controls" :markers="markers" show-location>
					<!-- <cover-view slot="callout">
						<template v-for="(item,index) in markers">
							<cover-view style="position: relative; width: 100%;padding-right: 20px;" :marker-id="item.id"
								:key='index'>
								<cover-view class="marker-box" style="padding: 5px 5px 12px 5px;">
									<cover-image class="position-absolute" style="margin-right: 5px; width: 30rpx; height: 30rpx;"
										:src="item.options.img"></cover-image>
									<cover-view>{{item.options.labelName}}</cover-view>

									<cover-image class="position-absolute"
										style="position: absolute; left: 0;top: 0; z-index: -1; width: 100%; height: 100%;"
										:src="item.options.isStore?item.options.active_bg:item.options.bg"></cover-image>
								</cover-view>
								<cover-view
									style="position: absolute; right: 0px; top: 50%; transform: translateY(-65%); z-index: 2 ; width: 16px; height: 16px; border-radius: 50%; background-color: aquamarine;"></cover-view>
							</cover-view>
						</template>
					</cover-view> -->

				</map>
				<view class="look_big_map" @click="goPage('/subPack/factoryMap/factoryMap')">
					看大地图
				</view>
			</view>
		</view>
		<view style="" v-if="isAuth_location">
			<view class="factory_box bgcf">
				<view class="df ac sb">
					<view class="factory_img">
						<image src="https://img-operation.csdnimg.cn/csdn/silkroad/img/1726286762449.jpg" mode="scaleToFill">
						</image>
						<view class="" style="position: absolute;left: 10rpx;top: 10rpx;width: 100rpx;height: 36rpx;">
							<image style="position: absolute;left: 0rpx;top: 1rpx;width: 100rpx;border-radius: 0rpx;"
								src="@/static/icon/rzns_icon.png" mode="widthFix"></image>
							<view class="factory_year">
								入驻4年
							</view>
						</view>
					</view>
					<view class="factory_content">
						<h2 class="f16 c28 f600" style="font-size: 32rpx;">上海邻米网络科技有限公司有限公司</h2>
						<view class="df ac mt5 sb" style="width: 100%;">
							<view class="df ac">
								<view class="df ac " style="transform: translateY(3rpx);">
									<uni-icons type="location" color="#1050c7" size="22"></uni-icons>
									<!-- <image style="width: 30rpx;" src="../../static/ditubiao.png" mode="widthFix"></image> -->
								</view>
								<view class="f14 c10">
									距您99公里
								</view>
							</view>
							<view class="df ac">
								<image style="height: 38rpx;" :src="getImgSrc('/uploads/20241212/1733996941675ab18d98284.png')" mode="heightFix"></image>
							</view>
							<view class="df ac">
								<image style="height: 55rpx;" src="@/static/icon/gsrz_icon.png" mode="heightFix"></image>
							</view>
						</view>
						<view class="df ac mt5" style="width: 100%;">
							<view class="factory_content_name f14">工艺：</view>
							<view class="factory_content_text f14">
								CNC铁削加工，五轴加工，车铣复合加工
							</view>
						</view>
						<view class="df ac mt5" style="width: 100%;">
							<view class="factory_content_name f14">行业：</view>
							<view class="factory_content_text f14">
								汽车制造业，航天航空，军工行业，医疗行业
							</view>
						</view>
						<view class="mt5 f14"
							style="width: 100%;color:gray;white-space: nowrap;overflow: hidden;text-overflow: ellipsis;">
							员工数：1-50人&nbsp;&nbsp;工厂面积：3001-5000m
							<!-- <view class="f14 mr5">员工数：1-50人</view>
							<view class="f14 mr5">工厂面积：工厂面积</view>
							<view class="">
								
							</view> -->
						</view>
					</view>
				</view>
				<view class="factory_img_box df sb mt10">
					<view class="factory_img_item" v-for="(item,index) in 4" :key="index">
						<image src="https://img-operation.csdnimg.cn/csdn/silkroad/img/1726286762449.jpg" mode="aspectFill"></image>
					</view>
				</view>
			</view>
			<view class="factory_box bgcf">
				<view class="df ac sb">
					<view class="factory_img">
						<image src="https://img-operation.csdnimg.cn/csdn/silkroad/img/1726286762449.jpg" mode="aspectFill">
						</image>
						<view class="" style="position: absolute;left: 10rpx;top: 10rpx;width: 100rpx;height: 36rpx;">
							<image style="position: absolute;left: 0rpx;top: 1rpx;width: 100rpx;border-radius: 0rpx;"
								src="@/static/icon/rzns_icon.png" mode="widthFix"></image>
							<view class="factory_year">
								入驻4年
							</view>
						</view>
					</view>
					<view class="factory_content">
						<h2 class="f16 c28 f600" style="font-size: 32rpx;">上海邻米网络科技有限公司</h2>
						<view class="df ac mt5 sb" style="width: 100%;">
							<view class="df ac">
								<view class="df ac " style="transform: translateY(3rpx);">
									<uni-icons type="location" color="#1050c7" size="22"></uni-icons>
									<!-- <image style="width: 30rpx;" src="../../static/ditubiao.png" mode="widthFix"></image> -->
								</view>
								<view class="f14 c10">
									距您99公里
								</view>
							</view>
							<view class="df ac">
								<image style="height: 38rpx;" :src="getImgSrc('/uploads/20241212/1733996941675ab18d98284.png')" mode="heightFix"></image>
							</view>
							<view class="df ac">
								<image style="height: 55rpx;" src="@/static/icon/gsrz_icon.png" mode="heightFix"></image>
							</view>
						</view>
						<view class="df ac mt5" style="width: 100%;">
							<view class="factory_content_name f14">工艺：</view>
							<view class="factory_content_text f14">
								CNC铁削加工，五轴加工，车铣复合加工
							</view>
						</view>
						<view class="df ac mt5" style="width: 100%;">
							<view class="factory_content_name f14">行业：</view>
							<view class="factory_content_text f14">
								汽车制造业，航天航空，军工行业，医疗行业
							</view>
						</view>
						<view class="mt5 f14"
							style="width: 100%;color:gray;white-space: nowrap;overflow: hidden;text-overflow: ellipsis;">
							员工数：1-50人&nbsp;&nbsp;工厂面积：3001-5000m
						</view>
					</view>
				</view>
			</view>
		</view>
		<view style="height: 150rpx;"></view>
		<tabbar></tabbar>

		<van-popup :show="screen_popup" @close="closePopup" position="top">
			<view class="" :style="'padding-top:' + (navTop * 2 + 90) + 'rpx;'">
				<ul class="df ac bgcf bbf1">
					<block v-for="(item, index) in tab_list" :key="index">
						<li class="df ac jc h44 w50" @tap.native="ontabSel($event, { i: index })" :data-i="index"
							style="width: 250rpx;">
							<P :class="'f14 ' + (item.show ? 'c10' : 'c6b')" class="tabListName">{{ item.name }}</P>
							<image class="down ml8" referrerPolicy='no-referrer'
								:src="item.show ? 'https://wx.xtwaixie.com/img/down1.png' : 'https://wx.xtwaixie.com/img/down.png'" />
						</li>
					</block>
				</ul>
				<view class="" style="display: flex;" v-if="tab_list[0].show">
					<view class="position_screen">
						<view class="mt10">
							当前位置
						</view>
						<view class="position_list df mt20">
							<view :class="screen_index[0] == index ? 'position_item_active position_item' : 'position_item'"
								:style="index == 0 ? '' : 'line-height:65rpx'" @click="changeScreen(0,index)"
								v-for="(item,index) in position_screen" :key="index">
								<view class="">
									{{ item == 0 ? '附近' : item + '公里' }}
								</view>
								<view class="f12" v-if="item == 0" :style=" screen_index[0] == index ? 'color:#4874CB;' : 'color:gray'">
									智能范围
								</view>
							</view>
						</view>
					</view>
				</view>
				<view class="h360" style="display: flex;" v-if="tab_list[1].show">
					<scroll-view class="h360 bgcf7" :scroll-y="true" style="width: 250rpx;">
						<ul class="db">
							<block v-for="(item, index) in info.machiningre" :key="index">
								<li class="pd015 h48 df ac sb" :class="{bgcf:screen_index[1] == index}"
									@tap.native="changeTab(index,item.id,item.name)">
									<p :class="'f14 c28 ' + (screen_index[1] == index ? 'c10' : '')">{{ item.name }}
									</p>
								</li>
							</block>
						</ul>
					</scroll-view>
				</view>
				<view class="df" v-if="tab_list[2].show">
					<scroll-view class="h360 w125 bgcf7" :scroll-y="true">
						<ul class="db">
							<block v-for="(item, index) in province_list" :key="index">
								<li :class="'tab-left ' + (region[0].act === item.region_id ? 'bgcf' : '')"
									@tap.native="onRegion($event, { name: item.region_name, id: item.region_id, type: 0 })"
									:data-name="item.region_name" :data-id="item.region_id" :data-type="0">
									<p :class="'f14 c28 ovh w110 ' + (region[0].act === item.region_id ? 'c10' : '')">
										{{ item.region_name }}
									</p>
								</li>
							</block>
						</ul>
					</scroll-view>
					<scroll-view class="h360 f1" :scroll-y="true">
						<ul class="db">
							<block v-for="(item, index) in city_list" :key="index">
								<li class="pd015 h48 df ac sb"
									@tap.native="onRegion($event, { name: item.region_name, id: item.region_id, type: 1 })"
									:data-name="item.region_name" :data-id="item.region_id" :data-type="1">
									<p :class="'f14 c28 ' + (region[1].act === item.region_id ? 'c10' : '')">
										{{ item.region_name }}
									</p>
									<image class="sel" src="https://wx.xtwaixie.com/img/sel.png"
										v-if="region[1].act === item.region_id" />
								</li>
							</block>
						</ul>
					</scroll-view>
				</view>
			</view>
		</van-popup>
	</view>
</template>

<script>
	import tabbar from '@/component/tabbar/tabbar';
	import top from '@/component/top/top';
	const app = getApp();
	import http from '../../utils/http';
	export default {
		components: {
			tabbar,
			top
		},
		data() {
			return {
				navTop: '',
				value: '',
				screen_popup: false,
				position_screen: [0, 5, 20, 50, 100],
				screen_index: [-1, 0, -1],
				tab_list: [{
						show: false,
						name: '距离',
						act: ''
					},
					{
						show: false,
						name: '工艺',
						act: ''
					},
					{
						show: false,
						name: '地区',
						act: '',
					}
				],
				province_list:[],
				city_list:[],
				polylinePoints: [{
						longitude: 120.54321,
						latitude: 30.09876
					},
					{
						longitude: 120.65432,
						latitude: 30.18765
					},
					{
						longitude: 120.76543,
						latitude: 30.27654
					}
				],
				longitude: 0,
				latitude: 0,
				controls: [{
					id: 1,
					iconPath: 'https://cdn.xtwaixie.com/uploads/20240925/172723812766f38fef41cdd.png',
					position: {
						left: 0,
						top: 300 - 50,
						width: 50,
						height: 50
					},
					clickable: true
				}],
				markers: [ // 标点列表
					{
						id: 1, //标记点id
						index: 0,
						clusterId: 1, //自定义点聚合簇效果时使用
						latitude: 31.11325, // 纬度
						longitude: 121.38306, // 经度
						iconPath: 'https://cdn.xtwaixie.com/uploads/20240925/172723812766f38fef41cdd.png',
						width: 35,
						height: 35,
						options: {
							isStore: true,
							img: 'https://cdn.xtwaixie.com/uploads/20240918/172665438966eaa7b5aa8be.png',
							bg: 'https://cdn.xtwaixie.com/uploads/20240918/172665438966eaa7b5aa8be.png',
							active_bg: 'https://cdn.xtwaixie.com/uploads/20240918/172665438966eaa7b5aa8be.png',
							labelName: '恩豪斯',
							name: '建材城名称（蓝鳌路店）',
							address: '高新区大学路101号',
							time1: '2024-02-28  16:30'
						},
						// 自定义窗口
						customCallout: {
							anchorX: 0,
							anchorY: 0,
							display: "ALWAYS" // 常显
						}
					},
					// https://cdn.xtwaixie.com/uploads/20240925/172723688566f38b15581b4.png
					{
						id: 2, //标记点id
						index: 1,
						clusterId: 1, //自定义点聚合簇效果时使用
						latitude: 31.11445, // 纬度
						longitude: 121.38326, // 经度
						iconPath: 'https://cdn.xtwaixie.com/uploads/20240925/172723812766f38fef41cdd.png',
						width: 35,
						height: 35,
						options: {
							isStore: false,
							img: 'https://cdn.xtwaixie.com/uploads/20240918/172665438966eaa7b5aa8be.png',
							bg: 'https://cdn.xtwaixie.com/uploads/20240918/172665438966eaa7b5aa8be.png',
							active_bg: 'https://cdn.xtwaixie.com/uploads/20240918/172665438966eaa7b5aa8be.png',
							labelName: '恩豪斯1111',
							name: '品牌名称（所属建材城）',
							address: '高新区大学路101号',
							time1: '2024-02-28  16:30',
							time2: '2024-02-28  16:30',
						},
						// 自定义窗口
						customCallout: {
							anchorX: 0,
							anchorY: 0,
							display: "ALWAYS" // 常显
						}
					},
				],
				isAuth_location: false,
				info: [],
				region: [{
					name: '',
					act: ''
				}, {
					name: '',
					act: ''
				}, {
					name: '',
					act: ''
				}],
			};
		},
		/**
		 * 生命周期函数--监听页面加载
		 */
		onLoad(options) {
			this.setData({
				navTop: app.globalData.navTop
			});
			this.getBase();
			this.getArea(1);
			const that = this
			uni.getSetting({
				success(res) {
					that.isAuth_location = res.authSetting['scope.userLocation']
					if (that.isAuth_location) {
						that.getLocation()
					}
				}
			})
		},
		/**
		 * 生命周期函数--监听页面初次渲染完成
		 */
		onReady() {},
		/**
		 * 生命周期函数--监听页面显示
		 */
		onShow() {
			const that = this
			uni.getSetting({
				success(res) {
					that.isAuth_location = res.authSetting['scope.userLocation']
					if (that.isAuth_location) {
						that.getLocation()
					}
				}
			})
			this.wxAuthLogin();
			let token = uni.getStorageSync('token');
			if (token) {
				this.getInfo();
			}
		},
		/**
		 * 生命周期函数--监听页面隐藏
		 */
		onHide() {},
		/**
		 * 生命周期函数--监听页面卸载
		 */
		onUnload() {},
		/**
		 * 页面相关事件处理函数--监听用户下拉动作
		 */
		onPullDownRefresh() {},
		/**
		 * 页面上拉触底事件的处理函数
		 */
		onReachBottom() {},
		/**
		 * 用户点击右上角分享
		 */
		onShareAppMessage() {},
		methods: {
			ontabShow(index) {
				this.screen_popup = true
				this.tab_list.forEach((item, i) => {
					item.act = (index === i) ? i : '';
					item.show = (index === i);
				});
			},
			closePopup() {
				this.screen_popup = false
				this.tab_list.forEach((item, i) => {
					// item.act = '';
					item.show = false;
				});
			},
			getArea(id) {
				const data = {
					pid: id
				};
				http.request('base/region', data).then((res) => {
					if (id === 1) {
						this.setData({
							province_list: res.data
						});
					} else {
						this.setData({
							city_list: res.data
						});
					}
				}).catch((res) => {
					uni.showToast({
						title: res.message,
						icon: 'none'
					});
				});
			},
			getBase() {
				// http.request('base/categoryList')
				// 	.then((res) => {
				// 		this.setData({
				// 			left_list: res.data.list,
				// 			right_list: res.data.list[0].level
				// 		});
				// 	})
				// 	.catch((res) => {
				// 		console.log(res);
				// 	});

				http.request('base/configData').then((res) => {
					const machiningData = res.data.machining || []; // 避免数据未定义的情况  
					res.data.machiningre = [{
						id: 0,
						name: '全部',
						children: []
					}, ...machiningData];
					res.data.machiningre.forEach(item => {
						item.children.unshift({
							name: "全部",
							id: item.id,
							machining_type: 0
						});
					});
					this.info = res.data
				}).catch((res) => {
					uni.showToast({
						title: res.message,
						icon: 'none'
					});
				});
			},
			changeScreen(i, index) {
				if (this.screen_index[i] === index) {
					this.$set(this.screen_index, i, -1);
				} else {
					this.$set(this.screen_index, i, index);
				}
				const name = this.position_screen[index]
				this.setData({
					[`tab_list[${i}].show`]:false,
					[`tab_list[${i}].name`]:name === 0 ? '附近' : name + '公里',
					[`tab_list[${i}].act`]:name
				})
				this.screen_popup = false
				// this.selectComponent('#item').toggle();  
			},
			changeTab(index,id,name){
				// this.onTab(id,name)
				// let act = this.act;
				// console.log(name, id);
				let status = false
				this.setData({
					[`screen_index[1]`]:index,
					[`tab_list[${1}].name`]: name == '全部' ? '工艺' : name,
					[`tab_list[${1}].act`]: id,
					// [`tab_list[${1}].show`]:status,
					// screen_popup:status
					// list: [],
					// page: 1
				});
				setTimeout(()=>{
					this.closePopup()
				},50)
				console.log(id)
				// this.getList();
				// this.onClose();
			},
			getLocation() {
				const that = this
				uni.getLocation({
					isHighAccuracy: true,
					// geocode: true,
					type: 'gcj02', // 火星坐标系
					success: (res) => {
						console.log(res, '获取当前位置')
						that.longitude = res.longitude
						that.latitude = res.latitude

					},
					fail(res) {
						uni.showToast({
							title: '定位失败：请开启定位',
							icon: 'none'
						});
					}
				});
			},
			openSet() {
				uni.openSetting({
					success(res) {
						console.log(res)
					},
					fail() {}
				})
			},
			ontabSel(e, _dataset) {
				/* ---处理dataset begin--- */
				// this.handleDataset(e, _dataset);
				/* ---处理dataset end--- */
				let index = e.currentTarget.dataset.i;

				this.tab_list.forEach((item, i) => {
					item.act = (index === i) ? i : '';
					item.show = (index === i);
				});
				// let status = this.tab_list[i].show;
				// this.setData({
				// 	[`tab_list[0].show`]: false,
				// 	[`tab_list[1].show`]: false,
				// 	// [`tab_list[2].show`]: false,
				// 	[`tab_list[${i}].show`]: !status,
				// 	act: i
				// });
			},
			onRegion(e, _dataset) {
				/* ---处理dataset begin--- */
				// this.handleDataset(e, _dataset);
				/* ---处理dataset end--- */
				let name = e.currentTarget.dataset.name;
				let id = e.currentTarget.dataset.id;
				let type = e.currentTarget.dataset.type;
				this.setData({
					[`region[${type}].name`]: name,
					[`region[${type}].act`]: id
				});
				if (type == 0) {
					this.getArea(id);
				} else if (type == 1) {
					this.setData({
						// page: 1,
						// list: [],
						[`tab_list[2].name`]: name === '全部' ? '地区' : name
					});
					setTimeout(()=>{
						this.closePopup()
					},50)
					// this.onClose();
					// this.getList();
				}
			},
			getInfo() {
				http.request('user/userInfo')
					.then((res) => {
						this.setData({
							cart_num: res.data.cart_count || 0
						});
					})
					.catch((res) => {
						uni.showToast({
							title: res.message,
							icon: 'none'
						});
					});
			},
			goSearch() {
				uni.navigateTo({
					url: '/pages/shopping/search'
				});
			},
			goPage(path){
				if(!path) return
				uni.navigateTo({
					url:path + '?latitude=' + this.latitude + '&longitude=' + this.longitude
				})
			},
			wxAuthLogin() {
				let that = this;
				uni.login({
					complete: (res) => {
						let data = {
							code: res.code
						};
						let h = {
							'content-type': 'application/x-www-form-urlencoded'
						};
						uni.request({
							url: http.appUrl + 'login/getLogin',
							data: data,
							method: 'POST',
							header: h,
							success: (res) => {
								uni.setStorageSync('token', res.data.data.token.token);
								uni.setStorageSync('is_login', res.data.code);
							},
							fail(res) {
								console.log(res);
							}
						});
					}
				});
			}
		}
	};
</script>
<style>
	@import './shopping.css';
</style>